<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在这个框框里点几下试试</title>
<style>
*{padding: 0;margin: 0;}
.center{
	width: 1210px;
	margin: 50px auto;
}
#can{
	border:1px solid #ccc;
}

</style>
	</head>
	<body>
		<div class="center">
			<p>说明：分别在下面两个框框里点几下试试</p>
			<canvas id="can" width="600" height="500"></canvas>
			<canvas id="myCanvas" width="600px" height="500px" style="border:1px solid #ccc;"></canvas>
		</div>
	</body>
<script>
	//第一个框框
    var _canvas=document.getElementById("can");
    var obj=_canvas.getContext("2d");
    var arr=[];
    _canvas.onclick = function(e){
        obj.beginPath();
        obj.moveTo(arr[0],arr[1]);
        obj.lineTo(e.offsetX,e.offsetY);
        obj.stroke();
        arr=[];
        arr.unshift(e.offsetX);
        arr.push(e.offsetY);
    }
    
    //第二个框框
    var canvas=document.getElementById('myCanvas')
    var ctx=canvas.getContext('2d')
	canvas.onclick = function(ev){
	    var x = ev.pageX-canvas.offsetLeft
	    var y = ev.pageY-canvas.offsetTop
	    ctx.strokeStyle="#089DB0"
	    ctx.lineWidth=2;
	    ctx.arc(x,y,2,0,2*Math.PI)
	    ctx.stroke()
	}
</script>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>
